<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="<%=request.getContextPath()%>/statics/uimaker/css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/statics/common/vendor/layer/skin/layer.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/statics/common/vendor/jquery-easyui-1.5/themes/bootstrap/easyui.css" rel="stylesheet"/>
<link href="<%=request.getContextPath()%>/statics/common/vendor/jquery-easyui-1.5/themes/icon.css" rel="stylesheet"/>
<script src="<%=request.getContextPath()%>/statics/common/vendor/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/statics/common/vendor/layer/layer.js"></script>
<script src="<%=request.getContextPath()%>/statics/common/vendor/jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script src="<%=request.getContextPath()%>/statics/common/vendor/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">系统模块</a></li>
    <li><a href="#">角色管理</a></li>
    </ul>
    </div>
    <div class="rightinfo">
    <div class="tools">
    	<ul class="toolbar">
        <li class="click" onclick="role.showAdd();"><span><img src="<%=request.getContextPath()%>/statics/uimaker/images/t01.png" /></span>添加</li>
        <li class="click"><span><img src="<%=request.getContextPath()%>/statics/uimaker/images/t02.png" /></span>修改</li>
        <li><span><img src="<%=request.getContextPath()%>/statics/uimaker/images/t03.png" /></span>删除</li>
        <li><span><img src="<%=request.getContextPath()%>/statics/uimaker/images/t04.png" /></span>统计</li>
        </ul>
        <ul class="toolbar1">
        <li><span><img src="<%=request.getContextPath()%>/statics/uimaker/images/t05.png" /></span>设置</li>
        </ul>
    </div>
	<table class="tablelist">
    	<thead>
	    	<tr>
		        <th>编号</th>
		        <th>名称</th>
		        <th>状态</th>
		        <th>操作</th>
	        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    </div>
    <div id="roleAddDialog" class="easyui-dialog" style="width:300px" data-options="
title:'新增角色',
buttons:'#roleAddButtons',
closed: true,
onClose:role.resetAddFrom">
	<form id="roleAddForm" method="post">
		<p>
			<strong>角色名：</strong>
			<input type="text" name="role.name" id="roleName" class="easyui-textbox" style="width:200px" data-options="
			required:true">
		</p>
		<p>
			<strong>权限管理：</strong>
			<input type="text" id="menuAdd" style="width:200px">
		</p>
	</form>
</div>
<div id="roleAddButtons">
	<a href="#" onclick="role.add()" class="easyui-linkbutton" data-options="
	iconCls: 'icon-add',
	plain: true">
		新增
	</a>
	<a href="#" onclick="role.hiddenAddDialog();" class="easyui-linkbutton" data-options="
	iconCls: 'icon-redo',
	plain: true">
		取消
	</a>
</div>
<div id="roleUpdateDialog" class="easyui-dialog" style="width:300px" data-options="
title:'修改角色信息',
buttons:'#roleUpdateButtons',
closed: true,
onClose:role.resetUpdateFrom">
	<form id="roleUpdateForm" method="post">
	<input name="role.id" type="hidden"/>
		<p>
			<strong>角色名：</strong>
			<input type="text" name="role.name" id="updateRoleName" class="easyui-textbox" style="width:200px" data-options="
			required:true">
		</p>
		<p>
			<strong>权限管理：</strong>
			<input type="text" id="menuUpdate" style="width:200px">
		</p>
	</form>
</div>
<div id="roleUpdateButtons">
	<a href="#" onclick="role.update()" class="easyui-linkbutton" data-options="
	iconCls: 'icon-edit',
	plain: true">
		修改
	</a>
	<a href="#" onclick="role.hiddenUpdateDialog();" class="easyui-linkbutton" data-options="
	iconCls: 'icon-redo',
	plain: true">
		取消
	</a>
</div>
    <script>
   		var role = {
   				
   				init:function(){
   					role.menuAdd = $('#menuAdd');
   					$('tbody').text('');
   					$.post('<%=request.getContextPath()%>/sys/user_getRole',
   							function(data){
   								for(var i=0;i<data.length;i++){
   									var state;
   									if(data[i].state==1){
   										state='已启用';
   									}else if(data[i].state==2){
   										state='已禁用';
   									}
   								
   									$('tbody').append(' <tr><td>'+ (i+1) +'</td>'
   														+'<td>'+ data[i].name +'</td>'
   														+'<td>'+ state +'</td>'
   														+'<td><a href="javascript:;" class="tablelink" onclick="role.showUpdate(&#x27;'+ data[i].id +'&#x27;)">修改</a>'
   														+' <a href="javascript:;" class="tablelink" onclick="role.remove(&#x27;'+ data[i].id +'&#x27;)"> 删除</a></td></tr>'
   													 );
   								}
   								$('.tablelist tbody tr:odd').addClass('odd');
   					},'json');
   				},
   				showAdd:function(){
   					role.menuAdd.combotree({
						url: '<%=request.getContextPath()%>/sys/role_getMenu',
						multiple: true,
						checkbox: true,
						onlyLeafCheck: false,
						onLoadSuccess: function(node, data) {
							$(this).tree('expandAll')
						}
					});
					$('#roleAddDialog').dialog('open');
   				},
   				hiddenAddDialog: function() {
					$('#roleAddDialog').dialog('close');
					role.resetAddForm();
				},
				resetAddForm: function() {
					role.roleAddForm.form('reset');
				},
				getParams: function(menu, defaultSerialize) {
					var treeObj = menu.combotree('tree');
					var indeterminateNodes = treeObj.tree('getChecked', ['checked','indeterminate']);
					var indeterminateNodeIds = '';
					$.each(indeterminateNodes, function(i, v) {
						indeterminateNodeIds = indeterminateNodeIds+'&menuIds=' + v.id;
					});
					return defaultSerialize + indeterminateNodeIds;
						
				},
				add:function(){
					var params = role.getParams(role.menuAdd,$('#roleAddForm').serialize());
					$.post('<%=request.getContextPath()%>/sys/role_add',params,
							function(data){
								if(data!=null){
									layer.msg('新增成功！',{
										icon:1,
										time:1000
										});
								}else{
									layer.msg('新增失败！',{
										icon:5,
										time:1000
										});
								}
					});
					 location.reload(); 
					role.hiddenAddDialog();
				},
   				showUpdate:function(v){
   					$.post('<%=request.getContextPath()%>/sys/role_getUserMenu', {id : v},
   							function(data) {
								$('#roleUpdateForm').form('load', {
									'role.id':data.id,
									'role.name': data.name,
								});
								
								var menuList = data.sysMenuList;
								var checkedItems = [];
								for(var i= 0;i<menuList.length;i++){
									checkedItems.push(menuList[i].id);
								}
								$('#menuUpdate').combotree({
									url: '<%=request.getContextPath()%>/sys/role_getMenu',
									multiple: true,
									checkbox: true,
									onlyLeafCheck: false,
									onLoadSuccess: function(node, data) {
										var that = this;
										$(that).tree('expandAll')
										if (data) {
											$(data).each(function(index, value) {
													if ($.inArray(value.id + '', checkedItems) != -1) {
														$(that).tree('check', value.target);
													} else{
														$(that).tree('uncheck', value.target);
													}
											});
										}
									}
								});
   					},'json');	
							$('#roleUpdateDialog').dialog('open');
   				},
   				update:function(){
   					var params = role.getParams($('#menuUpdate'),$('#roleUpdateForm').serialize());
   					$.post('<%=request.getContextPath()%>/sys/role_update',params,
							function(data){
								if(data!=null){
									layer.msg('修改成功！',{
										icon:1,
										time:1000
										});
								}else{
									layer.msg('修改失败！',{
										icon:5,
										time:1000
										});
								}
					});
   					 location.reload(); 
   					role.hiddenUpdateDialog();
   				},
   				hiddenUpdateDialog: function() {
					$('#roleUpdateDialog').dialog('close');
					role.resetUpdateFrom();
				},
				resetUpdateFrom: function() {
					$('#roleUpdateForm').form('reset');
				},
   				remove:function(id){
   					$.post('<%=request.getContextPath()%>/sys/role_remove',{roleId:id},
   							function(data){
   						if(data>=1){
								layer.msg('删除成功！',{
									icon:1,
									time:1000
									});
							}else{
								layer.msg('删除失败！',{
									icon:5,
									time:1000
									});
							}
   					});
   				 location.reload(); 
   				}
   		}
   		$(function(){
   			role.init();
   		});
	</script>
</body>

</html>
